<script setup lang="ts">
  import DOMPurify from "dompurify";
  import { useI18n } from "vue-i18n";
  import { toast } from "@/components/ui/sonner";

  import { useDynamicDialog } from "~/composables/use-dynamic-dialog";
  import { useUserApi } from "~/composables/use-api";
  import { useConfirm } from "~/composables/use-confirm";
  import { useTheme } from "~/composables/use-theme";
  
  // 添加必要的UI组件导入
  import { Button } from '@/components/ui/button'
  
  // 添加Base组件导入
  import BaseContainer from "~/components/Base/Container.vue";
  import BaseCard from "~/components/Base/Card.vue";
  import BaseSectionHeader from "~/components/Base/SectionHeader.vue";

  // 添加图标导入
  import MdiDatabaseExport from "~icons/mdi/database-export";
  import MdiAttachment from "~icons/mdi/attachment";
  import MdiCog from "~icons/mdi/cog";
  import MdiImageSizeSelectLarge from "~icons/mdi/image-size-select-large";
  import MdiDatabase from "~icons/mdi/database";
  // 添加二维码图标导入
  import MdiQrcode from "~icons/mdi/qrcode";
  import MdiMapMarker from "~icons/mdi/map-marker";

  const { t } = useI18n();

  definePageMeta({
    middleware: ["auth"],
  });
  useHead({
    title: "HomeBox | " + t("menu.tools"),
  });

  // Properly use the theme composable
  const { setTheme } = useTheme();

  const { openDialog } = useDynamicDialog();
  const api = useUserApi();
  const confirm = useConfirm();

  async function ensureAssetIDs() {
    const { isCanceled } = await confirm.open(t("tools.actions_set.ensure_ids_confirm"));

    if (isCanceled) {
      return;
    }

    const result = await api.actions.ensureAssetIDs();

    if (result.error) {
      toast.error(t("tools.toast.failed_ensure_ids"));
      return;
    }

    toast.success(t("tools.toast.asset_success", { results: result.data.completed }));
  }

  async function ensureImportRefs() {
    const { isCanceled } = await confirm.open(t("tools.import_export_set.import_ref_confirm"));

    if (isCanceled) {
      return;
    }

    const result = await api.actions.ensureImportRefs();

    if (result.error) {
      toast.error(t("tools.toast.failed_ensure_import_refs"));
      return;
    }

    toast.success(t("tools.toast.asset_success", { results: result.data.completed }));
  }

  async function resetItemDateTimes() {
    const { isCanceled } = await confirm.open(t("tools.actions_set.zero_datetimes_confirm"));

    if (isCanceled) {
      return;
    }

    const result = await api.actions.resetItemDateTimes();

    if (result.error) {
      toast.error(t("tools.toast.failed_zero_datetimes"));
      return;
    }

    toast.success(t("tools.toast.asset_success", { results: result.data.completed }));
  }

  async function clearInventory() {
    const { isCanceled } = await confirm.open(
      t("tools.actions_set.clear_confirm")
    );

    if (isCanceled) {
      return;
    }

    const { isCanceled: isFinalCanceled } = await confirm.open(
      t("tools.actions_set.clear_final_confirm")
    );

    if (isFinalCanceled) {
      return;
    }

    const result = await api.items.clear();

    if (result.error) {
      const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
        ? (result.error as Error).message 
        : String(result.error);
      toast.error(t("tools.actions_set.clear_failed") + ": " + errorMessage);
      return;
    }

    toast.success(t("tools.actions_set.clear_success") + `: ${result.data.deleted} ` + t("tools.actions_set.clear_items_deleted"));
  }

  async function previewMigrateOriginalToThumbnail() {
    const { isCanceled } = await confirm.open(
      t("tools.thumbnails.preview_migrate_confirm")
    );

    if (isCanceled) {
      return;
    }

    toast.info(t("tools.thumbnails.preview_migrate_info"));
    const result = await api.actions.migrateOriginalToThumbnail(true);

    if (result.error) {
      const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
        ? (result.error as Error).message 
        : String(result.error);
      toast.error(t("tools.thumbnails.preview_migrate_failed") + ": " + errorMessage);
      return;
    }

    toast.success(t("tools.thumbnails.preview_migrate_success", {
      migrated: result.data.migrated,
      skipped: result.data.skipped,
      total: result.data.total
    }));
  }

  async function migrateOriginalToThumbnail() {
    const { isCanceled } = await confirm.open(
      t("tools.thumbnails.migrate_confirm")
    );

    if (isCanceled) {
      return;
    }

    const { isCanceled: isFinalCanceled } = await confirm.open(
      t("tools.thumbnails.migrate_final_confirm")
    );

    if (isFinalCanceled) {
      return;
    }

    toast.info(t("tools.thumbnails.migrate_info"));
    const result = await api.actions.migrateOriginalToThumbnail(false);

    if (result.error) {
      const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
        ? (result.error as Error).message 
        : String(result.error);
      toast.error(t("tools.thumbnails.migrate_failed") + ": " + errorMessage);
      return;
    }

    toast.success(t("tools.thumbnails.migrate_success", {
      migrated: result.data.migrated,
      skipped: result.data.skipped,
      total: result.data.total
    }));
  }

  async function exportAttachments() {
    const { isCanceled } = await confirm.open(t("tools.attachments.export_confirm"));

    if (isCanceled) {
      return;
    }

    const url = api.items.exportAttachmentsURL();
    window.open(url, "_blank");
  }

  async function importAttachments() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.zip';
    input.onchange = async (event) => {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (!file) return;

      const { isCanceled } = await confirm.open(t("tools.attachments.import_confirm", { filename: file.name }));

      if (isCanceled) {
        return;
      }

      const result = await api.items.importAttachments(file);

      if (result.error) {
        const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
          ? (result.error as Error).message 
          : String(result.error);
        toast.error(t("tools.attachments.import_failed") + ": " + errorMessage);
        return;
      }

      toast.success(t("tools.attachments.import_success", { 
        message: result.data.message || t("global.confirm") 
      }));
    };
    input.click();
  }

  // SQL Dump Export/Import Functions
  function exportSQLDumpDownload() {
    const url = api.items.exportSQLDumpDownloadURL();
    window.open(url, "_blank");
  }

  async function saveSQLDumpExport() {
    const { isCanceled } = await confirm.open(t("tools.sqldump.export_save_confirm"));

    if (isCanceled) {
      return;
    }

    const result = await api.items.exportSQLDumpSave();

    if (result.error) {
      const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
        ? (result.error as Error).message 
        : String(result.error);
      toast.error(t("tools.sqldump.export_save_failed") + ": " + errorMessage);
      return;
    }

    toast.success(t("tools.sqldump.export_save_success", { filename: result.data.filename }));
  }

  async function validateSQLDumpUpload() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.sql';
    input.onchange = async (event) => {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (!file) return;

      toast.info(t("tools.sqldump.validate_info", { filename: file.name }));
      
      const result = await api.items.validateSQLDump(file);

      if (result.error) {
        const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
          ? (result.error as Error).message 
          : String(result.error);
        toast.error(t("tools.sqldump.validate_failed") + ": " + errorMessage);
        return;
      }

      if (result.data.valid) {
        toast.success(t("tools.sqldump.validate_success"));
      } else {
        toast.error(t("tools.sqldump.validate_errors", { 
          errors: result.data.errors.join('\n') 
        }));
      }
    };
    input.click();
  }

  async function importSQLDumpUpload() {
    // 创建导入选项对话框的简化版本
    const importOptions = {
      replaceExisting: false,
      skipDuplicates: true,  // 默认跳过重复记录
      clearBeforeImport: false,
      ignoreErrors: false
    };

    // 如果需要更复杂的选项，可以在这里添加选择对话框
    // 暂时使用默认的安全选项

    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.sql';
    input.onchange = async (event) => {
      const file = (event.target as HTMLInputElement).files?.[0];
      if (!file) return;

      let confirmMessage = t("tools.sqldump.import_upload_confirm", { filename: file.name });

      const { isCanceled } = await confirm.open(confirmMessage);

      if (isCanceled) {
        return;
      }

      toast.info(t("tools.sqldump.import_upload_info", { filename: file.name }));
      
      const result = await api.items.importSQLDumpUpload(file, importOptions);

      if (result.error) {
        const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
          ? (result.error as Error).message 
          : String(result.error);
        toast.error(t("tools.sqldump.import_upload_failed") + ": " + errorMessage);
        return;
      }

      // 构建详细的结果消息
      let message = t("tools.sqldump.import_upload_success", {
        statements_executed: result.data.statements_executed,
        statements_skipped: result.data.statements_skipped,
        records_inserted: result.data.records_inserted,
        records_updated: result.data.records_updated,
        records_skipped: result.data.records_skipped,
        duration: result.data.duration,
        success: result.data.success ? t("global.confirm") : t("global.cancel")
      });
      
      // 显示已清空的表
      if (result.data.tables_cleared && result.data.tables_cleared.length > 0) {
        message += t("tools.sqldump.import_upload_success_cleared", {
          tables: result.data.tables_cleared.join(', ')
        });
      }
      
      // 显示使用的选项
      if (result.data.options_used) {
        const options = result.data.options_used;
        const usedOptions = [];
        if (options.replace_existing) usedOptions.push(t("tools.actions_set.create_missing_thumbnails"));
        if (options.skip_duplicates) usedOptions.push(t("tools.actions_set.ensure_import_refs"));
        if (options.clear_before_import) usedOptions.push(t("tools.actions_set.zero_datetimes"));
        if (options.ignore_errors) usedOptions.push(t("tools.actions_set.ensure_ids"));
        if (options.disable_foreign_keys) usedOptions.push(t("tools.sqldump.clear"));
        if (usedOptions.length > 0) {
          message += t("tools.sqldump.import_upload_success_options", {
            options: usedOptions.join(', ')
          });
        }
      }
      
      // 显示警告信息
      if (result.data.warnings && result.data.warnings.length > 0) {
        message += t("tools.sqldump.import_upload_success_warnings", {
          warnings: result.data.warnings.slice(0, 3).join('\n')
        });
        if (result.data.warnings.length > 3) {
          // Fixed: Use proper translation instead of concatenating translation keys
          message += `\n...${t("tools.sqldump.and")} ${result.data.warnings.length - 3} ${t("tools.sqldump.more")}`;
        }
      }
      
      // 显示错误信息
      if (result.data.errors && result.data.errors.length > 0) {
        message += t("tools.sqldump.import_upload_success_errors", {
          errors: result.data.errors.slice(0, 3).join('\n')
        });
        if (result.data.errors.length > 3) {
          // Fixed: Use proper translation instead of concatenating translation keys
          message += `\n...${t("tools.sqldump.and")} ${result.data.errors.length - 3} ${t("tools.sqldump.more")}`;
        }
      }

      if (result.data.success) {
        toast.success(message);
      } else {
        toast.warning(message);
      }
    };
    input.click();
  }

  async function importSQLDumpBackup() {
    try {
      // Get SQL dump backup files (filtering .sql files from database backups)
      const backups = await api.items.getDatabaseBackups();
      if (backups.error) {
        const errorMessage = typeof backups.error === 'object' && backups.error !== null && 'message' in backups.error 
          ? (backups.error as Error).message 
          : String(backups.error);
        toast.error(t("tools.sqldump.import_backup_failed") + ": " + errorMessage);
        return;
      }

      const sqlFiles = backups.data.files?.filter(file => file.endsWith('.sql')) || [];
      
      if (sqlFiles.length === 0) {
        toast.info(t("tools.sqldump.import_backup_no_files"));
        return;
      }

      const selectedBackup = await openDialog({
        title: t("tools.sqldump.import_backup_select_title"),
        component: 'SelectBackupDialog',
        componentProps: {
          backups: sqlFiles
        }
      });

      if (!selectedBackup) return;

      const { isCanceled } = await confirm.open(t("tools.sqldump.import_backup_confirm", { filename: selectedBackup }));

      if (isCanceled) {
        return;
      }

      toast.info(t("tools.sqldump.import_backup_info"));
      
      const result = await api.items.importSQLDumpBackup(selectedBackup);

      if (result.error) {
        console.error('SQL DUMP restore failed:', result.error);
        const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
          ? (result.error as Error).message 
          : result.error.toString 
            ? result.error.toString() 
            : String(result.error);
        toast.error(t("tools.sqldump.import_backup_failed") + ": " + errorMessage);
        return;
      }

      let message = t("tools.sqldump.import_backup_success", {
        statements_executed: result.data.statements_executed,
        statements_skipped: result.data.statements_skipped,
        success: result.data.success ? t("global.confirm") : t("global.cancel")
      });
      
      if (result.data.errors && result.data.errors.length > 0) {
        message += t("tools.sqldump.import_backup_success_errors", {
          errors: result.data.errors.slice(0, 3).join('\n')
        });
        if (result.data.errors.length > 3) {
          // Fixed: Use proper translation instead of concatenating translation keys
          message += `\n...${t("tools.sqldump.and")} ${result.data.errors.length - 3} ${t("tools.sqldump.more")}`;
        }
      }

      if (result.data.success) {
        toast.success(message);
      } else {
        toast.warning(message);
      }
    } catch (error) {
      console.error('SQL DUMP restore process error:', error);
      toast.error(t("tools.sqldump.import_backup_process_failed") + ": " + ((error as Error).message || String(error)));
    }
  }

  // Clear Database Function with Advanced Safety Mechanism
  async function clearDatabaseSQLDump() {
    // 第一层警告：初始警告
    const { isCanceled: firstCancel } = await confirm.open(
      t("tools.sqldump.clear_warning")
    );

    if (firstCancel) {
      return;
    }

    // 第二层警告：输入确认字符串
    let confirmationInput = '';
    
    // 创建一个更友好的输入对话框
    const confirmationResult = await new Promise((resolve) => {
      // 创建遮罩层
      const overlay = document.createElement('div');
      overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        font-family: system-ui, -apple-system, sans-serif;
      `;
      
      // 创建对话框
      const dialog = document.createElement('div');
      dialog.style.cssText = `
        background: white;
        border-radius: 12px;
        padding: 24px;
        min-width: 400px;
        max-width: 500px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      `;
      
      dialog.innerHTML = `
        <div style="margin-bottom: 20px;">
          <h3 style="margin: 0 0 16px 0; color: #dc2626; font-size: 18px; font-weight: 600;">
            ${t("tools.sqldump.clear_confirmation_input_title")}
          </h3>
          <p style="margin: 0 0 16px 0; color: #374151; line-height: 1.5;">
            ${t("tools.sqldump.clear_confirmation_input_message")}
          </p>
          <div style="background: #f3f4f6; padding: 12px; border-radius: 6px; margin-bottom: 16px;">
            <code style="color: #dc2626; font-weight: 600; font-size: 14px;">CLEAR_ALL_DATA</code>
          </div>
          <input 
            type="text" 
            id="confirmation-input" 
            placeholder="${t("tools.sqldump.clear_confirmation_input_placeholder")}"
            style="
              width: 100%;
              padding: 12px;
              border: 2px solid #d1d5db;
              border-radius: 6px;
              font-size: 14px;
              box-sizing: border-box;
              font-family: monospace;
            "
          />
          <p style="margin: 12px 0 0 0; color: #6b7280; font-size: 12px;">
            ${t("tools.sqldump.clear_confirmation_input_note")}
          </p>
        </div>
        <div style="display: flex; gap: 12px; justify-content: flex-end;">
          <button 
            id="cancel-btn"
            style="
              padding: 8px 16px;
              border: 1px solid #d1d5db;
              background: white;
              color: #374151;
              border-radius: 6px;
              cursor: pointer;
              font-size: 14px;
            "
          >
            ${t("global.cancel")}
          </button>
          <button 
            id="confirm-btn"
            style="
              padding: 8px 16px;
              border: none;
              background: #dc2626;
              color: white;
              border-radius: 6px;
              cursor: pointer;
              font-size: 14px;
            "
          >
            ${t("global.confirm")}
          </button>
        </div>
      `;
      
      overlay.appendChild(dialog);
      document.body.appendChild(overlay);
      
      const input = dialog.querySelector('#confirmation-input') as HTMLInputElement;
      const cancelBtn = dialog.querySelector('#cancel-btn') as HTMLButtonElement;
      const confirmBtn = dialog.querySelector('#confirm-btn') as HTMLButtonElement;
      
      // 聚焦到输入框
      input.focus();
      
      // 处理确认按钮
      const handleConfirm = () => {
        const value = input.value.trim();
        document.body.removeChild(overlay);
        resolve(value);
      };
      
      // 处理取消按钮
      const handleCancel = () => {
        document.body.removeChild(overlay);
        resolve(null);
      };
      
      // 绑定事件
      confirmBtn.addEventListener('click', handleConfirm);
      cancelBtn.addEventListener('click', handleCancel);
      
      // 回车键确认
      input.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          handleConfirm();
        } else if (e.key === 'Escape') {
          handleCancel();
        }
      });
      
      // 点击遮罩层取消
      overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
          handleCancel();
        }
      });
    });

    if (!confirmationResult || confirmationResult !== 'CLEAR_ALL_DATA') {
      if (confirmationResult === null) {
        toast.info(t("tools.sqldump.clear_confirmation_input_cancel"));
      } else {
        toast.error(t("tools.sqldump.clear_confirmation_input_error"));
      }
      return;
    }

    // 第三层警告：最后机会
    const { isCanceled: finalCancel } = await confirm.open(
      t("tools.sqldump.clear_final_confirm")
    );

    if (finalCancel) {
      toast.info(t("tools.sqldump.clear_confirmation_input_cancel"));
      return;
    }

    // 执行清空操作
    toast.info(t("tools.sqldump.clear_info"));
    
    try {
      const result = await api.items.clearDatabase('CLEAR_ALL_DATA');

      if (result.error) {
        const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
          ? (result.error as Error).message 
          : String(result.error);
        toast.error(t("tools.sqldump.clear_failed") + ": " + errorMessage);
        return;
      }

      // 构建详细的结果消息
      let message = t("tools.sqldump.clear_success", {
        tables_cleared: result.data.tables_cleared.length,
        records_deleted: result.data.records_deleted,
        duration: result.data.duration,
        backup_created: result.data.backup_created
      });
      
      if (result.data.tables_cleared.length > 0) {
        message += t("tools.sqldump.clear_success_tables", {
          tables: result.data.tables_cleared.join(', ')
        });
      }
      
      // 显示警告信息
      if (result.data.warnings && result.data.warnings.length > 0) {
        message += t("tools.sqldump.clear_success_warnings", {
          warnings: result.data.warnings.slice(0, 3).join('\n')
        });
        if (result.data.warnings.length > 3) {
          // Fixed: Use proper translation instead of concatenating translation keys
          message += `\n...${t("tools.sqldump.and")} ${result.data.warnings.length - 3} ${t("tools.sqldump.more")}`;
        }
      }
      
      // 显示错误信息
      if (result.data.errors && result.data.errors.length > 0) {
        message += t("tools.sqldump.clear_success_errors", {
          errors: result.data.errors.slice(0, 3).join('\n')
        });
        if (result.data.errors.length > 3) {
          // Fixed: Use proper translation instead of concatenating translation keys
          message += `\n...${t("tools.sqldump.and")} ${result.data.errors.length - 3} ${t("tools.sqldump.more")}`;
        }
      }

      if (result.data.success) {
        toast.success(message);
        // 提示用户可能需要刷新页面
        toast.info(t("tools.sqldump.clear_refresh"));
      } else {
        toast.warning(message);
      }
    } catch (error) {
      console.error('Error during database clearing process:', error);
      toast.error(t("tools.sqldump.clear_process_failed") + ": " + ((error as Error).message || String(error)));
    }
  }

  async function previewCreateThumbnailsForOriginals() {
      const { isCanceled } = await confirm.open(
        t("tools.thumbnails.preview_create_confirm")
      );
  
      if (isCanceled) {
        return;
      }
  
      toast.info(t("tools.thumbnails.preview_create_info"));
      const result = await api.actions.createThumbnailsForOriginals(true);
  
      if (result.error) {
        const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
          ? (result.error as Error).message 
          : String(result.error);
        toast.error(t("tools.thumbnails.preview_create_failed") + ": " + errorMessage);
        return;
      }
  
      toast.success(t("tools.thumbnails.preview_create_success", {
        created: result.data.created,
        skipped: result.data.skipped,
        total: result.data.total
      }));
    }
  
    async function createThumbnailsForOriginals() {
      const { isCanceled } = await confirm.open(
        t("tools.thumbnails.create_confirm")
      );
  
      if (isCanceled) {
        return;
      }
  
      const { isCanceled: isFinalCanceled } = await confirm.open(
        t("tools.thumbnails.create_final_confirm")
      );
  
      if (isFinalCanceled) {
        return;
      }
  
      toast.info(t("tools.thumbnails.create_info"));
      const result = await api.actions.createThumbnailsForOriginals(false);
  
      if (result.error) {
        const errorMessage = typeof result.error === 'object' && result.error !== null && 'message' in result.error 
          ? (result.error as Error).message 
          : String(result.error);
        toast.error(t("tools.thumbnails.create_failed") + ": " + errorMessage);
        return;
      }
  
      toast.success(t("tools.thumbnails.create_success", {
        created: result.data.created,
        skipped: result.data.skipped,
        total: result.data.total
      }));
    }

</script>

<template>
  <BaseContainer class="flex flex-col gap-4">
    <h1 class="text-2xl font-bold mb-6 px-1">{{ $t('menu.tools') }}</h1>
    
    <BaseCard>
      <template #title>
        <BaseSectionHeader>
          <MdiAttachment class="-mt-1 mr-2" />
          <span>{{ $t('tools.attachments.title') }}</span>
          <template #description>{{ $t('tools.attachments.description') }}</template>
        </BaseSectionHeader>
      </template>
      <div class="p-4">
        <div class="space-y-2">
          <Button @click="exportAttachments" variant="outline" class="w-full">
            {{ $t('tools.attachments.export') }}
          </Button>
          <Button @click="importAttachments" variant="outline" class="w-full">
            {{ $t('tools.attachments.import') }}
          </Button>
        </div>
      </div>
    </BaseCard>

    <BaseCard>
      <template #title>
        <BaseSectionHeader>
          <MdiCog class="-mt-1 mr-2" />
          <span>{{ $t('tools.actions') }}</span>
          <template #description>{{ $t('tools.actions_sub') }}</template>
        </BaseSectionHeader>
      </template>
      <div class="p-4">
        <div class="space-y-2">
          <Button @click="ensureAssetIDs" variant="outline" class="w-full">
            {{ $t('tools.actions_set.ensure_ids') }}
          </Button>
          <Button @click="ensureImportRefs" variant="outline" class="w-full">
            {{ $t('tools.actions_set.ensure_import_refs') }}
          </Button>
          <Button @click="resetItemDateTimes" variant="outline" class="w-full">
            {{ $t('tools.actions_set.zero_datetimes') }}
          </Button>
          <Button @click="clearInventory" variant="destructive" class="w-full">
            {{ $t('tools.actions_set.clear') }}
          </Button>
        </div>
      </div>
    </BaseCard>

    <BaseCard>
      <template #title>
        <BaseSectionHeader>
          <MdiImageSizeSelectLarge class="-mt-1 mr-2" />
          <span>{{ $t('tools.thumbnails.title') }}</span>
          <template #description>{{ $t('tools.thumbnails.description') }}</template>
        </BaseSectionHeader>
      </template>
      <div class="p-4">
        <div class="space-y-2">
          <Button @click="previewMigrateOriginalToThumbnail" variant="outline" class="w-full">
            {{ $t('tools.thumbnails.preview_migrate') }}
          </Button>
          <Button @click="migrateOriginalToThumbnail" variant="outline" class="w-full">
            {{ $t('tools.thumbnails.migrate') }}
          </Button>
          <Button @click="previewCreateThumbnailsForOriginals" variant="outline" class="w-full">
            {{ $t('tools.thumbnails.preview_create') }}
          </Button>
          <Button @click="createThumbnailsForOriginals" variant="outline" class="w-full">
            {{ $t('tools.thumbnails.create') }}
          </Button>
        </div>
      </div>
    </BaseCard>

    <!-- 添加标签生成卡片 -->
    <BaseCard>
      <template #title>
        <BaseSectionHeader>
          <MdiQrcode class="-mt-1 mr-2" />
          <span>{{ $t('tools.reports') }}</span>
          <template #description>{{ $t('tools.reports_sub') }}</template>
        </BaseSectionHeader>
      </template>
      <div class="p-4">
        <div class="space-y-2">
          <Button @click="$router.push('/reports/label-generator')" variant="outline" class="w-full">
            {{ $t('tools.reports_set.asset_labels') }}
          </Button>
          <Button @click="$router.push('/reports/location-label-generator')" variant="outline" class="w-full">
            {{ $t('tools.reports_set.location_labels') }}
          </Button>
        </div>
      </div>
    </BaseCard>

    <BaseCard>
      <template #title>
        <BaseSectionHeader>
          <MdiDatabase class="-mt-1 mr-2" />
          <span>{{ $t('tools.sqldump.title') }}</span>
          <template #description>{{ $t('tools.sqldump.description') }}</template>
        </BaseSectionHeader>
      </template>
      <div class="p-4">
        <div class="space-y-2">
          <Button @click="exportSQLDumpDownload" variant="outline" class="w-full">
            {{ $t('tools.sqldump.export_download') }}
          </Button>
          <Button @click="saveSQLDumpExport" variant="outline" class="w-full">
            {{ $t('tools.sqldump.export_save') }}
          </Button>
          <Button @click="validateSQLDumpUpload" variant="outline" class="w-full">
            {{ $t('tools.sqldump.validate') }}
          </Button>
          <Button @click="importSQLDumpUpload" variant="outline" class="w-full">
            {{ $t('tools.sqldump.import_upload') }}
          </Button>
          <Button @click="importSQLDumpBackup" variant="outline" class="w-full">
            {{ $t('tools.sqldump.import_backup') }}
          </Button>
          <Button @click="clearDatabaseSQLDump" variant="destructive" class="w-full">
            {{ $t('tools.sqldump.clear') }}
          </Button>
        </div>
      </div>
    </BaseCard>
  </BaseContainer>
</template>
